<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template2.xhtml">
    <ui:param name="bodyClass" value="landing-body"/>

    <ui:define name="head">
        <h:outputStylesheet library="ultima-layout" name="css/animate.css"/>

        <script type="text/javascript">
            $(function () {
                $('#menu-button').on('click', function (e) {
                    var menu = $('#menu');
                    if (menu.hasClass('lmenu-active')) {
                        menu.addClass('fadeOutUp');

                        setTimeout(function () {
                            menu.removeClass('fadeOutUp fadeInDown lmenu-active');
                        }, 500);
                    } else {
                        menu.addClass('lmenu-active fadeInDown');
                    }
                    e.preventDefault();
                });
            });
        </script>
    </ui:define>

    <ui:define name="content">
        <div class="landing-wrapper">
            <div id="header">
                <div class="header-top clearfix">
                    <span class="logo"/>

                    <a id="menu-button" href="#">
                        <span class="fa fa-bars"/>
                    </a>
                    <ul id="menu" class="animated">
                        <li><a href="#"><i class="ui-icon ui-icon-home"/><span>Home</span></a></li>
                        <li><a href="#introduction"><i class="ui-icon ui-icon-open-in-browser"/><span>Introduction</span></a></li>
                        <li><a href="#features"><i class="ui-icon ui-icon-list"/><span>Features</span></a></li>
                        <li><a href="#promotion"><i class="ui-icon ui-icon-group-work"/><span>Promotion</span></a></li>
                        <li><a href="#pricing"><i class="ui-icon ui-icon-attach-money"/><span>Pricing</span></a></li>
                        <li><a href="#video"><i class="ui-icon ui-icon-videocam"/><span>Video</span></a></li>
                    </ul>
                </div>

                <div class="header-content clearfix">
                    <h1>Your application slogan comes here</h1>
                    <p:button value="Sign Up Now" outcome="/dashboard.xhtml" styleClass="secondary"/>
                </div>
            </div>

            <div id="features">
                <h2>The Ultimate Material Application Template for PrimeFaces</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Esse delectus sit velit, aspernatur voluptates molestiae, enim recusandae.
                    Odit dicta, maiores quas ad nesciunt, illum expedita veritatis illo quam odio id!</p>

                <div class="ui-g">
                    <div class="ui-g-12 ui-md-4">
                        <h3>Creative</h3>
                        <p>Lorem ipsum dolor sit amet</p>
                        <div class="feature-icon">
                            <i class="material-icons">create</i>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-md-4">
                        <h3>Responsive</h3>
                        <p>Lorem ipsum dolor sit amet</p>
                        <div class="feature-icon">
                            <i class="material-icons">smartphone</i>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-md-4">
                        <h3>Cross Browser</h3>
                        <p>Lorem ipsum dolor sit amet</p>
                        <div class="feature-icon">
                            <i class="material-icons">open_in_browser</i>
                        </div>
                    </div>

                    <div class="ui-g-12 ui-md-4">
                        <div class="feature-icon">
                            <i class="material-icons">vertical_align_center</i>
                        </div>
                        <h3>Well Organized</h3>
                        <p>Well Organ</p>
                    </div>
                    <div class="ui-g-12 ui-md-4">
                        <div class="feature-icon">
                            <i class="material-icons">palette</i>
                        </div>
                        <h3>Beautiful</h3>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                    <div class="ui-g-12 ui-md-4">
                        <div class="feature-icon">
                            <i class="material-icons">check_circle</i>
                        </div>
                        <h3>Just For you</h3>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
            </div>

            <div id="promotion" class="clearfix">
                <div class="ui-g">
                    <div class="ui-g-12 ui-lg-8">
                        <h1>Boost Your Productivity.</h1>
                        <p:button value="Sign Up Now" outcome="/dashboard.xhtml" styleClass="secondary"/>
                    </div>
                    <div class="ui-g-12 ui-lg-4">
                        <div class="card">
                            <h3>Just</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                Ab perferendis nesciunt ad reiciendis explicabo consequatur sapiente odit ipsa harum illum,
                                necessitatibus quaerat voluptates aspernatur iure, aperiam possimus sint sit mollitia!</p>
                        </div>

                        <div class="card">
                            <h3>Like</h3>
                            <p>Ab perferendis nesciunt ad reiciendis explicabo consequatur sapiente odit ipsa harum illum.
                                Necessitatibus quaerat voluptates aspernatur iure, aperiam possimus sint sit mollitia!</p>
                        </div>

                        <div class="card">
                            <h3>That</h3>
                            <p>Necessitatibus quaerat voluptates aspernatur iure, aperiam possimus sint sit mollitia!
                                Ab perferendis nesciunt ad reiciendis explicabo consequatur sapiente odit ipsa harum illum.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="pricing">
                <h2>Pricing</h2>
                <p>Esse delectus sit velit, aspernatur voluptates molestiae, enim recusandae.
                    Odit dicta, maiores quas ad nesciunt, illum expedita veritatis illo quam odio id!</p>

                <div class="ui-g">
                    <div class="ui-g-12 ui-md-4 pricing-box pricing-basic">
                        <div class="card">
                            <div class="pricing-header">
                                <span class="name">BASIC</span>
                                <span class="fee">$5</span>
                                <span class="type">Monthly</span>
                            </div>
                            <div class="pricing-content">
                                <ul>
                                    <li><i class="material-icons">check</i><span>Responsive</span></li>
                                    <li><i class="material-icons">check</i><span>Push Messages</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-md-4 pricing-box pricing-standard">
                        <div class="card">
                            <div class="pricing-header">
                                <span class="name">STANDARD</span>
                                <span class="fee">$25</span>
                                <span class="type">Monthly</span>
                            </div>
                            <div class="pricing-content">
                                <ul>
                                    <li><i class="material-icons">check</i><span>Responsive</span></li>
                                    <li><i class="material-icons">check</i><span>Push Messages</span></li>
                                    <li><i class="material-icons">check</i><span>7/24 Support</span></li>
                                    <li><i class="material-icons">check</i><span>Free Shipping</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="ui-g-12 ui-md-4 pricing-box pricing-professional">
                        <div class="card">
                            <div class="pricing-header">
                                <span class="name">PROFESSIONAL</span>
                                <span class="fee">$50</span>
                                <span class="type">Monthly</span>
                            </div>
                            <div class="pricing-content">
                                <ul>
                                    <li><i class="material-icons">check</i><span>Responsive</span></li>
                                    <li><i class="material-icons">check</i><span>Push Messages</span></li>
                                    <li><i class="material-icons">check</i><span>7/24 Support</span></li>
                                    <li><i class="material-icons">check</i><span>Free Shipping</span></li>
                                    <li><i class="material-icons">check</i><span>Unlimited Bandwidth</span></li>
                                    <li><i class="material-icons">check</i><span>Unlimited Storage</span></li>
                                    <li><i class="material-icons">check</i><span>Gift Cards</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="video">
                <div class="video-content">
                    <h2>Video</h2>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
                    <div class="video-container">
                        <iframe src="https://www.youtube.com/embed/B_lYGUtCd0g" frameborder="0" width="560" height="330"></iframe>
                    </div>
                </div>
            </div>

            <div class="footer">
                <div class="footer-content">
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-6">
                            <p>PRIMEFACES ULTIMA</p>
                        </div>
                        <div class="ui-g-12 ui-md-6">
                            <ul>
                                <li><a href="#mobile">Promotion</a></li>
                                <li><a href="#pricing">Pricing</a></li>
                                <li><a href="#video">Video</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#introduction">Introduction</a></li>
                                <li><a href="#features">Features</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>